/**
 * Created by huqiang on 16/11/1.
 */


import React, {Component} from 'react';
import {Platform, Image, ScrollView, StatusBar, StyleSheet, Text, TouchableHighlight, View} from 'react-native';
import Util from './utils'
import Icon from 'react-native-vector-icons/Ionicons'
import Swiper from 'react-native-swiper'

const weatherData = [{key:0,city:"\u798f\u5dde",night:!0,bg:require("./img/w2.png"),abs:"\u5927\u90e8\u6674\u6717",degree:15,today:{week:"\u661f\u671f\u516d",day:"\u4eca\u5929",high:16,low:14},hours:[{key:101,time:"\u73b0\u5728",icon:"ios-moon",degree:"15\xb0",color:"rgba(255,255,255,1)"},{key:102,time:"3\u65f6",icon:"ios-cloudy-night",degree:"15\xb0",color:"rgba(255,255,255,0.8)"},{key:103,time:"4\u65f6",icon:"ios-cloudy-night",degree:"16\xb0",color:"rgba(255,255,255,0.8)"},{key:104,time:"5\u65f6",icon:"ios-cloudy-night",degree:"16\xb0",color:"rgba(255,255,255,0.8)"},{key:105,time:"6\u65f6",icon:"ios-cloudy-night",degree:"16\xb0",color:"rgba(255,255,255,0.8)"},{key:106,time:"06:21",icon:"ios-sunny-outline",degree:"\u65e5\u51fa",color:"#fedf32"},{key:107,time:"7\u65f6",icon:"ios-partly-sunny",degree:"16\xb0",color:"rgba(255,255,255,0.9)"},{key:108,time:"8\u65f6",icon:"ios-partly-sunny",degree:"18\xb0",color:"rgba(255,255,255,0.9)"},{key:109,time:"9\u65f6",icon:"ios-sunny",degree:"19\xb0",color:"#fedf32"},{key:110,time:"10\u65f6",icon:"ios-sunny",degree:"122\xb0",color:"#fedf32"},{key:111,time:"11\u65f6",icon:"ios-sunny",degree:"23\xb0",color:"#fedf32"},{key:112,time:"13\u65f6",icon:"ios-sunny",degree:"22\xb0",color:"#fedf32"},{key:113,time:"13\u65f6",icon:"ios-sunny",degree:"22\xb0",color:"#fedf32"},{key:114,time:"14\u65f6",icon:"ios-partly-sunny",degree:"16\xb0",color:"rgba(255,255,255,0.9)"},{key:115,time:"15\u65f6",icon:"ios-partly-sunny",degree:"22\xb0",color:"rgba(255,255,255,0.9)"},{key:116,time:"16\u65f6",icon:"ios-partly-sunny",degree:"21\xb0",color:"rgba(255,255,255,0.9)"},{key:117,time:"17\u65f6",icon:"ios-partly-sunny",degree:"19\xb0",color:"rgba(255,255,255,0.9)"},{key:118,time:"18\u65f6",icon:"ios-partly-sunny",degree:"18\xb0",color:"rgba(255,255,255,0.9)"},{key:119,time:"18:06",icon:"ios-partly-sunny-outline",degree:"\u65e5\u843d",color:"rgba(255,255,255,0.9)"},{key:120,time:"19\u65f6",icon:"ios-cloudy-night",degree:"18\xb0",color:"rgba(255,255,255,0.8)"},{key:121,time:"20\u65f6",icon:"ios-cloudy-night",degree:"18\xb0",color:"rgba(255,255,255,0.8)"},{key:122,time:"21\u65f6",icon:"ios-cloudy-night",degree:"18\xb0",color:"rgba(255,255,255,0.8)"},{key:123,time:"22\u65f6",icon:"ios-cloudy-night",degree:"17\xb0",color:"rgba(255,255,255,0.8)"},{key:124,time:"23\u65f6",icon:"ios-cloudy",degree:"17\xb0",color:"rgba(255,255,255,0.8)"},{key:125,time:"0\u65f6",icon:"ios-cloudy",degree:"17\xb0",color:"rgba(255,255,255,0.8)"},{key:126,time:"1\u65f6",icon:"ios-cloudy",degree:"17\xb0",color:"rgba(255,255,255,0.8)"},{key:127,time:"2\u65f6",icon:"ios-cloudy",degree:"17\xb0",color:"rgba(255,255,255,0.8)"}],days:[{key:21,day:"\u661f\u671f\u4e00",icon:"ios-partly-sunny",high:21,low:16},{key:22,day:"\u661f\u671f\u4e8c",icon:"ios-rainy",high:22,low:14},{key:23,day:"\u661f\u671f\u4e09",icon:"ios-rainy",high:21,low:11},{key:24,day:"\u661f\u671f\u56db",icon:"ios-rainy",high:12,low:8},{key:25,day:"\u661f\u671f\u4e94",icon:"ios-rainy",high:9,low:7},{key:26,day:"\u661f\u671f\u516d",icon:"ios-partly-sunny",high:13,low:9},{key:27,day:"\u661f\u671f\u65e5",icon:"ios-rainy",high:17,low:13},{key:28,day:"\u661f\u671f\u4e00",icon:"ios-partly-sunny",high:18,low:14},{key:29,day:"\u661f\u671f\u4e8c",icon:"ios-partly-sunny",high:22,low:17}],info:"\u4eca\u5929\uff1a\u4eca\u5929\u5927\u90e8\u591a\u4e91\u3002\u73b0\u5728\u6c14\u6e29 15\xb0\uff1b\u6700\u9ad8\u6c14\u6e2923\xb0\u3002",rise:"06:21",down:"18:06",prop:"10%",humi:"94%",dir:"\u4e1c\u5317\u504f\u5317",speed:"3\u5343\u7c73\uff0f\u5c0f\u65f6",feel:"15\xb0",rain:"0.0 \u5398\u7c73",pres:"1,016 \u767e\u5e15",sight:"5.0 \u516c\u91cc",uv:"0"},{key:1,city:"\u5361\u5c14\u52a0\u91cc",night:!1,bg:require("./img/w3.png"),abs:"\u5927\u90e8\u6674\u6717",degree:15,today:{week:"\u661f\u671f\u516d",day:"\u4eca\u5929",high:16,low:14},hours:[{key:101,time:"\u73b0\u5728",icon:"ios-moon",degree:"15\xb0",color:"rgba(255,255,255,1)"},{key:102,time:"3\u65f6",icon:"ios-cloudy-night",degree:"15\xb0",color:"rgba(255,255,255,0.8)"},{key:103,time:"4\u65f6",icon:"ios-cloudy-night",degree:"16\xb0",color:"rgba(255,255,255,0.8)"},{key:104,time:"5\u65f6",icon:"ios-cloudy-night",degree:"16\xb0",color:"rgba(255,255,255,0.8)"},{key:105,time:"6\u65f6",icon:"ios-cloudy-night",degree:"16\xb0",color:"rgba(255,255,255,0.8)"},{key:106,time:"06:21",icon:"ios-sunny-outline",degree:"\u65e5\u51fa",color:"#fedf32"},{key:107,time:"7\u65f6",icon:"ios-partly-sunny",degree:"16\xb0",color:"rgba(255,255,255,0.9)"},{key:108,time:"8\u65f6",icon:"ios-partly-sunny",degree:"18\xb0",color:"rgba(255,255,255,0.9)"},{key:109,time:"9\u65f6",icon:"ios-sunny",degree:"19\xb0",color:"#fedf32"},{key:110,time:"10\u65f6",icon:"ios-sunny",degree:"122\xb0",color:"#fedf32"},{key:111,time:"11\u65f6",icon:"ios-sunny",degree:"23\xb0",color:"#fedf32"},{key:112,time:"13\u65f6",icon:"ios-sunny",degree:"22\xb0",color:"#fedf32"},{key:113,time:"13\u65f6",icon:"ios-sunny",degree:"22\xb0",color:"#fedf32"},{key:114,time:"14\u65f6",icon:"ios-partly-sunny",degree:"16\xb0",color:"rgba(255,255,255,0.9)"},{key:115,time:"15\u65f6",icon:"ios-partly-sunny",degree:"22\xb0",color:"rgba(255,255,255,0.9)"},{key:116,time:"16\u65f6",icon:"ios-partly-sunny",degree:"21\xb0",color:"rgba(255,255,255,0.9)"},{key:117,time:"17\u65f6",icon:"ios-partly-sunny",degree:"19\xb0",color:"rgba(255,255,255,0.9)"},{key:118,time:"18\u65f6",icon:"ios-partly-sunny",degree:"18\xb0",color:"rgba(255,255,255,0.9)"},{key:119,time:"18:06",icon:"ios-partly-sunny-outline",degree:"\u65e5\u843d",color:"rgba(255,255,255,0.9)"},{key:120,time:"19\u65f6",icon:"ios-cloudy-night",degree:"18\xb0",color:"rgba(255,255,255,0.8)"},{key:121,time:"20\u65f6",icon:"ios-cloudy-night",degree:"18\xb0",color:"rgba(255,255,255,0.8)"},{key:122,time:"21\u65f6",icon:"ios-cloudy-night",degree:"18\xb0",color:"rgba(255,255,255,0.8)"},{key:123,time:"22\u65f6",icon:"ios-cloudy-night",degree:"17\xb0",color:"rgba(255,255,255,0.8)"},{key:124,time:"23\u65f6",icon:"ios-cloudy",degree:"17\xb0",color:"rgba(255,255,255,0.8)"},{key:125,time:"0\u65f6",icon:"ios-cloudy",degree:"17\xb0",color:"rgba(255,255,255,0.8)"},{key:126,time:"1\u65f6",icon:"ios-cloudy",degree:"17\xb0",color:"rgba(255,255,255,0.8)"},{key:127,time:"2\u65f6",icon:"ios-cloudy",degree:"17\xb0",color:"rgba(255,255,255,0.8)"}],days:[{key:21,day:"\u661f\u671f\u4e00",icon:"ios-partly-sunny",high:21,low:16},{key:22,day:"\u661f\u671f\u4e8c",icon:"ios-rainy",high:22,low:14},{key:23,day:"\u661f\u671f\u4e09",icon:"ios-rainy",high:21,low:11},{key:24,day:"\u661f\u671f\u56db",icon:"ios-rainy",high:12,low:8},{key:25,day:"\u661f\u671f\u4e94",icon:"ios-rainy",high:9,low:7},{key:26,day:"\u661f\u671f\u516d",icon:"ios-partly-sunny",high:13,low:9},{key:27,day:"\u661f\u671f\u65e5",icon:"ios-rainy",high:17,low:13},{key:28,day:"\u661f\u671f\u4e00",icon:"ios-partly-sunny",high:18,low:14},{key:29,day:"\u661f\u671f\u4e8c",icon:"ios-partly-sunny",high:22,low:17}],info:"\u4eca\u5929\uff1a\u4eca\u5929\u5927\u90e8\u591a\u4e91\u3002\u73b0\u5728\u6c14\u6e29 15\xb0\uff1b\u6700\u9ad8\u6c14\u6e2923\xb0\u3002",rise:"06:21",down:"18:06",prop:"10%",humi:"94%",dir:"\u4e1c\u5317\u504f\u5317",speed:"3\u5343\u7c73\uff0f\u5c0f\u65f6",feel:"15\xb0",rain:"0.0 \u5398\u7c73",pres:"1,016 \u767e\u5e15",sight:"5.0 \u516c\u91cc",uv:"0"}];

const weatherData2 = {"results":[{"location":{"id":"WTMKQ069CCJ7","name":"杭州","country":"CN","path":"杭州,杭州,浙江,中国","timezone":"Asia/Shanghai","timezone_offset":"+08:00"},
    "hourly":[{"time":"2016-11-02T22:00:00+08:00","text":"多云","code":"4","temperature":"11","humidity":"81","wind_direction":"东","wind_speed":"0.0"},{"time":"2016-11-02T23:00:00+08:00","text":"多云","code":"4","temperature":"11","humidity":"82","wind_direction":"东","wind_speed":"0.0"}]}]}

const weatherNow= {"results":[{"location":{"id":"WX4FBXXFKE4F","name":"北京","country":"CN","path":"北京,北京,中国","timezone":"Asia/Shanghai","timezone_offset":"+08:00"},"now":{"text":"霾","code":"31","temperature":"8","feels_like":"7","pressure":"1013","humidity":"71","visibility":"1.0","wind_direction":"南","wind_direction_degree":"195","wind_speed":"7.56","wind_scale":"2","clouds":"","dew_point":""},"last_update":"2016-11-03T13:20:00+08:00"}]}

const weatherDaily = {"results":[{"location":{"id":"WX4FBXXFKE4F","name":"北京","country":"CN","path":"北京,北京,中国","timezone":"Asia/Shanghai","timezone_offset":"+08:00"},"daily":[{"date":"2016-11-03","text_day":"霾","code_day":"31","text_night":"霾","code_night":"31","high":"15","low":"2","precip":"","wind_direction":"无持续风向","wind_direction_degree":"","wind_speed":"10","wind_scale":"2"},{"date":"2016-11-04","text_day":"霾","code_day":"31","text_night":"霾","code_night":"31","high":"17","low":"2","precip":"","wind_direction":"无持续风向","wind_direction_degree":"","wind_speed":"10","wind_scale":"2"},{"date":"2016-11-05","text_day":"多云","code_day":"4","text_night":"阴","code_night":"9","high":"18","low":"4","precip":"","wind_direction":"无持续风向","wind_direction_degree":"","wind_speed":"10","wind_scale":"2"},{"date":"2016-11-06","text_day":"阴","code_day":"9","text_night":"小雨","code_night":"13","high":"10","low":"4","precip":"","wind_direction":"无持续风向","wind_direction_degree":"","wind_speed":"10","wind_scale":"2"},{"date":"2016-11-07","text_day":"阴","code_day":"9","text_night":"晴","code_night":"0","high":"12","low":"2","precip":"","wind_direction":"北","wind_direction_degree":"0","wind_speed":"20","wind_scale":"4"}],"last_update":"2016-11-03T11:00:00+08:00"}]}
const bg=require("./img/w2.png")


class Weather2 extends Component{
    static propTypes = {
        back:React.PropTypes.func.isRequired,
    }

    constructor(props){
        super(props);
        this.state = {
            weather: weatherData2.results,
            now: weatherNow.results,
            daily:weatherDaily.results

        }
    }

    componentDidMount(){
        const that = this;
        const location = 'hangzhou',
            unit='c',
            start=0,
            hours=24,
            days=7
            ;
        Util.get('https://api.thinkpage.cn/v3/weather/hourly.json?key=dyvt06zwlmjmntlv&location='+location+'&language=zh-Hans&unit='+unit+'&start=0&hours='+hours+'',function (response) {
            console.log('hourly');
            console.log(response);
            that.setState({
                weather:response.results
            });
        });
        Util.get('https://api.thinkpage.cn/v3/weather/now.json?key=dyvt06zwlmjmntlv&location='+location+'&language=zh-Hans&unit=c',function (response) {
            console.log('now: ');
            console.log(response);
            that.setState({
                now:response.results
            });
        });
        Util.get('https://api.thinkpage.cn/v3/weather/daily.json?key=dyvt06zwlmjmntlv&location='+location+'&language=zh-Hans&unit=c&start=0&days='+days+'',function (response) {
            console.log('daily: ');
            console.log(response);
            that.setState({
                daily:response.results
            });
        });

        if (Platform === 'ios'){
            StatusBar.setBarStyle(0);
        }
    }

    render(){
        const now = this.state.now[0].now;
        const dailys = this.state.daily[0].daily;
        const weekStatic = new Array('星期日','星期一','星期二','星期三','星期四','星期五','星期六');
        const toDay = weekStatic[new Date(this.state.now[0].last_update).getDay()];
        const slides = this.state.weather.map((elem,index) =>{
            const hourly = elem.hourly.map((hourElem,hourIndex) => {
                const hour = new Date(hourElem.time).getHours();
                return(
                    <View key={hourElem.time} style={styles.withinDayHoursBox}>
                        <Text style={styles.withinDayHoursTime}>{hour}:00 </Text>
                        <Text style={styles.withinDayHoursTime}>{hourElem.text} </Text>

                        {/*<Icon name={hourElem.icon} size={25} style={[styles.withinDayHoursIcon,{color:hourElem.color}]} ></Icon>*/}
                        <Text style={hourIndex==0? styles.withinDayHoursDegreeBold:styles.withinDayHoursDegree}>{hourElem.temperature}℃</Text>
                    </View>
                );
            })

            const da = dailys.map((dailyElem,dailyIndex) =>{
                const day = weekStatic[new Date(dailyElem.date).getDay()];
                console.log(new Date(dailyElem.date).getDay() + '   ' +day)
                return(
                    <View key={dailyElem.date} style={styles.withinWeekLine}>
                        <View style={styles.withinWeekDay}>
                            <Text style={styles.withinWeekDayText}>{day}</Text>
                        </View>
                        <View style={styles.withinWeekText}>
                            <Text style={styles.withinWeekTextDay}>{dailyElem.text_day}</Text>
                            <Text style={styles.withinWeekTextNight}>{dailyElem.text_night}</Text>
                        </View>
                        <View style={styles.withinWeekDegree}>
                            <Text style={styles.withinWeekHigh}>{dailyElem.high}</Text>
                            <Text style={styles.withinWeekLowNight}>{dailyElem.low}</Text>
                        </View>
                    </View>
                );
            })

        return(
            <View key ="0">
                <Image style={styles.image} source={bg}></Image>
                <ScrollView style={styles.pageContainer} showsVerticalScrollIndicator={false}>
                    <View style={styles.headInfo}>
                        <Text style={styles.city}>{elem.location.name} {toDay}</Text>
                        <Text style={styles.abs}>{now.text} </Text>
                        <Text style={styles.degree}>{now.temperature} </Text>
                        <Text style={styles.circle}>℃</Text>
                    </View>
                    {/*当天信息*/}
                    {/*<View style={styles.withinDayGeneral}>
                        <View style={styles.withinDayHead}>
                            <Text style={styles.withinDayWeek}>{toDay}</Text>
                            <Text></Text>
                        </View>
                    </View>*/}
                    <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.withinDayHoursContainer}>
                        <View style={styles.withinDayHours}>
                            {hourly}
                        </View>
                    </ScrollView>
                    <View>{da}</View>
                </ScrollView>
            </View>
        );

        });
        return (
            <View>
                <Swiper style={styles.wrapper}
                        showsButtons={false}
                        paginationStyle={{bottom:10, paddingTop:10, borderTopColor:"rgba(255,255,255,0.7)", borderTopWidth:Util.pixel }}
                        dot={<View style={{backgroundColor: 'rgba(255,255,255,0.2)', width: 6, height: 6, borderRadius: 3, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}
                        activeDot ={<View style={{backgroundColor: 'rgba(255,255,255,0.5)', width: 6, height: 6, borderRadius: 3, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}
                >
                {slides}

                </Swiper>
                <Text>3232232</Text>
            </View>
        );
    }
}


class Weather extends Component{
    static propTypes = {
        back: React.PropTypes.func.isRequired,
    }

    constructor(props){
        super(props);
        this.state = {
            weather: weatherData
        }
    }

    componentDidMount(){
        console.log('post url');
        try {
            //gank的api只支持get请求
            let location = 'hangzhou',
                unit='c',
                start=0,
                hours=24;
            // Util.get('https://api.thinkpage.cn/v3/weather/hourly.json?key=dyvt06zwlmjmntlv&location='+location+'&language=zh-Hans&unit='+unit+'&start=0&hours=24',function (response) {
            //     console.log(response);
            // });
        }catch (error) {
            console.warn(error)
        }
        if (Platform === 'ios'){
            StatusBar.setBarStyle(0);
        }
    }

    _back(){
        this.props.back;
    }

    render(){
        const slides = this.state.weather.map((elem, index) => {
            const hourView = elem.hours.map((hourElem, hourIndex) => {
                return (
                    <View key={hourElem.key} style={styles.withinDayHoursBox}>
                        <Text style={styles.withinDayHoursTime}>{hourElem.time} </Text>
                        <Icon name={hourElem.icon} size={25} style={[styles.withinDayHoursIcon,{color:hourElem.color}]} ></Icon>
                        <Text style={hourIndex==0? styles.withinDayHoursDegreeBold:styles.withinDayHoursDegree}>{hourElem.degree} </Text>
                    </View>
                );
            });
            const dayView = elem.days.map((dayElem, dayIndex) => {
               return (
                   <View key={dayElem.key} style={styles.withinWeekLine}>
                       <View style={styles.withinWeekDay}>
                           <Text style={styles.withinWeekDayText}>{dayElem.day}</Text>
                       </View>
                       <View style={styles.withinWeekIcon}>
                           <Icon name={dayElem.icon} style ={styles.withinWeekIconIcon}></Icon>
                       </View>
                       <View style={styles.withinWeekDegree}>
                           <Text style={styles.withinWeekHigh}>{dayElem.high}</Text>
                           <Text style={elem.night?styles.withinWeekLowNight:styles.withinWeekLow}>{dayElem.low}</Text>
                       </View>
                   </View>
               );
            });
            return(
                <View key ={elem.key}>
                    <Image style={styles.image} source={elem.bg}></Image>
                    <ScrollView style={styles.pageContainer} showsVerticalScrollIndicator={false}>
                        <View style={styles.headInfo}>
                            <Text style={styles.city}>{elem.city} </Text>
                            <Text style={styles.abs}>{elem.abs} </Text>
                            <Text style={styles.degree}>{elem.degree} </Text>
                            <Text style={styles.circle}>。</Text>
                        </View>
                        <View style={styles.withinDay}>
                            <View style={styles.withinDayGeneral}>
                                <View style={styles.withinDayHead}>
                                    <Text style={styles.withinDayWeek}>{elem.today.week}</Text>
                                    <Text style={styles.withinDayDay}>{elem.today.day}</Text>
                                </View>
                                <View style={styles.withinDayTail}>
                                    <Text style={styles.withinDayDay}>{elem.today.day}</Text>
                                </View>
                            </View>

                            <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.withinDayHoursContainer}>
                                <View style={styles.withinDayHours}>{hourView}</View>
                            </ScrollView>

                            <View style={styles.withinWeek}>
                                {dayView}
                            </View>

                            <View style={styles.weatherInfo}>
                                <Text style={styles.weatherInfoText}>{elem.info}</Text>
                            </View>
                            <View style={styles.weatherOther}>
                                <View style={styles.weatherOtherSection}>
                                    <View style={styles.weatherOtherLine}>
                                        <Text style={styles.weatherOtherTitle}>日出:</Text>
                                        <Text style={styles.weatherOtherValue}>{elem.rise}</Text>
                                    </View>
                                </View>
                            </View>

                        </View>
                    </ScrollView>
                </View>
            );
        });

        return (
            <View>
                <Swiper style={styles.wrapper}
                        showsButtons={false}
                        paginationStyle={{bottom:10, paddingTop:10, borderTopColor:"rgba(255,255,255,0.7)", borderTopWidth:Util.pixel }}
                        dot={<View style={{backgroundColor: 'rgba(255,255,255,0.2)', width: 6, height: 6, borderRadius: 3, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}
                        activeDot ={<View style={{backgroundColor: 'rgba(255,255,255,0.5)', width: 6, height: 6, borderRadius: 3, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}
                >
                    {slides}
                </Swiper>
                <TouchableHighlight onPress={() => this._back()} style={styles.backBtn}>
                    <Icon size={17} name="ios-list-outline" style={styles.backBtnIcon}></Icon>
                </TouchableHighlight>
            </View>
        );
    }

}

export default class day3 extends Component {

    _back(){
        this.props.navigator.pop();
        StatusBar.setBarStyle(0);
    }

    render(){
        return (
            <View>
                {/*<Weather back={() => this._back()}/>*/}
                <Weather2 back={() => this._back()}></Weather2>
            </View>
        );
    }
}


const styles = StyleSheet.create({
    pageContainer:{
        backgroundColor:"transparent",
        position: "absolute",
        width: Util.size.width,
        left:0,
        top: 20,
        height: Util.size.height - 53
    },
    headInfo:{
        paddingTop:70,
        alignItems:"center",
        paddingBottom:40,
    },
    city:{
        fontSize: 25,
        color:"#fff",
        paddingBottom: 5,
        backgroundColor:"transparent"
    },
    abs:{
        fontSize:15,
        color:"#fff",
        backgroundColor:"transparent"
    },
    degree:{
        fontSize:85,
        color:"#fff",
        fontWeight: "100",
    },
    circle:{
        fontSize:35,
        color:"#fff",
        fontWeight: "300",
        position:"absolute",
        top:130,
        right:Util.size.width/2-55,
    },
    withinDayGeneral:{
        flexDirection:"row",
        width: Util.size.width,
    },
    withinDayHead:{
        flex:1,
        flexDirection:"row",
        justifyContent: 'flex-start',
        paddingLeft: 20,
    },
    withinDayTail:{
        flex:1,
        flexDirection:"row",
        justifyContent: 'flex-end',
        paddingRight: 10,
    },
    withinDayWeek:{
        fontSize:15,
        color: "#fff",
        fontWeight: "400",
        width:50,
    },
    withinDayDay:{
        fontSize:15,
        color: "#fff",
        fontWeight: "300",
        width:50,
    },
    withinDayHigh:{
        fontSize:16,
        color: "#fff",
        fontWeight: "200",
        width:30,
    },
    withinDayLow:{
        fontSize:16,
        color: "#eee",
        fontWeight: "200",
        width:30,
    },
    withinDayLowNight:{
        fontSize:16,
        color: "#aaa",
        fontWeight: "200",
        width:30,
    },
    withinDayHoursBox:{
        width:55,
    },
    withinDayHoursContainer:{
        marginTop:3,
        borderTopColor:"rgba(255,255,255,0.7)",borderTopWidth:Util.pixel,
        borderBottomColor:"rgba(255,255,255,0.7)",borderBottomWidth:Util.pixel
    },
    withinDayHours:{
        paddingLeft:7,paddingTop:10,paddingBottom:10,paddingRight:10,
        flexDirection:"row",
        flexWrap:"nowrap"
    },
    withinDayHoursTime:{
        color:"#fff",
        fontSize:12,
        textAlign:"center"
    },
    withinDayHoursTimeBold:{
        color:"#fff",
        fontSize:13,
        textAlign:"center",
        fontWeight:"500",
    },
    withinDayHoursIcon:{
        textAlign:"center",
        paddingTop:5,
    },
    withinDayHoursDegree:{
        color:"#fff",
        fontSize:14,
        paddingTop:5,
        textAlign:"center"
    },
    withinDayHoursDegreeBold:{
        color:"#fff",
        fontSize:15,
        textAlign:"center",
        paddingTop:5,
        fontWeight:"500"
    },
    withinWeek:{
        paddingTop:5
    },
    withinWeekLine:{
        flexDirection:"row",
        height: 28
    },
    withinWeekDay:{
        justifyContent:"center",
        alignItems:"flex-start",
        flex:1,
    },
    withinWeekIcon:{
        justifyContent:"center",
        alignItems:"center",
        // flexDirection:"row",
        // paddingRight:25,
        flex:1,
    },
    withinWeekText:{
        justifyContent:"center",
        alignItems:"center",
        flexDirection:"row",
        paddingRight:25,
        flex:1,
    },
    withinWeekTextDay:{
        color:"#fff",
        width:40,
        fontSize:16,
        textAlign:"right"
    },
    withinWeekTextNight:{
        color:"#eee",
        width:40,
        fontSize:16,
        textAlign:"right"
    },
    withinWeekDegree:{
        justifyContent:"flex-end",
        alignItems:"center",
        flex:1,
        flexDirection:"row",
        paddingRight:25,
    },
    withinWeekHigh:{
        color:"#fff",
        width:35,
        fontSize:16,
        textAlign:"right"
    },
    withinWeekIconIcon:{
        color:"#fff"
    },
    withinWeekLow:{
        color:"#eee",
        width:35,
        fontSize:16,
        textAlign:"right"
    },
    withinWeekLowNight:{
        color:"#aaa",
        width:35,
        fontSize:16,
        textAlign:"right"
    },
    withinWeekDayText:{
        color:"#fff",
        paddingLeft:20,
        fontSize:15,
    },
    weatherInfo:{
        marginTop:5,
        borderTopColor:"rgba(255,255,255,0.7)", borderTopWidth:Util.pixel,
        borderBottomColor:"rgba(255,255,255,0.7)", borderBottomWidth:Util.pixel
    },
    weatherInfoText:{
        color:"#fff",
        fontSize:15,
        paddingTop:10,paddingLeft:20,paddingBottom:10,paddingRight:20,
    },
    weatherOther:{
        paddingTop:10
    },
    weatherOtherSection:{
        paddingBottom:10
    },
    weatherOtherLine:{
        flexDirection:"row",
        flexWrap:"nowrap"
    },
    weatherOtherTitle:{
        width: Util.size.width/2-15,
        color:"#fff",
        textAlign:"right",
        fontSize: 15,
    },
    weatherOtherValue:{
        width: Util.size.width/2,
        paddingLeft:15,
        flex:1,
        fontSize: 15,
        color:"#fff",
    },
    backBtn:{
        position:"absolute",
        right:20,bottom:7
    },
    backBtnIcon:{
        color:"#fff"
    },
})
